/*
 * @Author: Yejing
 * @Date: 2023-06-28 17:56:29
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-28 18:11:29
 * @Description: desc
 */
<template>
	<u-modal v-model="delQueryDailog" width="650rpx" class="del-handle-dialog" border-radius="40"
		:show-confirm-button="false" :show-title="false" :zoom="true" content="content" z-index="1000">
		<slot name="default">
			<view class="default-contetnt">
				<view class="header" style="height: 72rpx;">
					<image v-show="options.showBtn" @click="close" style="width: 72rpx;height: 100%;"
						src="@/static/svg/Icon-remove.svg" mode=""></image>
				</view>
				<view class="body">
					<image class="symbol-icon" :src="iconSrc">
					</image>
					<view class="title">
						{{options.title }}
					</view>
					<view class="describe" v-html="options.des">

					</view>
				</view>
				<view class="footer">
					<u-button :id="'u-buttons'" :style="`background-color: ${options.btnColor};`" @click.native="commit"
						type="default">
						{{options.btnText}}
					</u-button>
				</view>
			</view>
		</slot>
	</u-modal>
</template>

<script>
	/**
	 * imageForSize 提示框组件
	 * @description 基于u-view u-model组件通过$refs.x.show的方法调用并传入提交和关闭的回调
	 */
	export default {
		name: "promptDialog",
		data() {
			return {
				// 模态框状态
				delQueryDailog: false,
				// 参数
				options: {},
				// 默认参数
				default: {
					showBtn: true, //展示按钮
					btnColor: '#2934D0', //按钮颜色
					des: 'Are you sure you want to delete this address?', //描述
					icon: 'tip', //icon类型
					btnText: this.$t('system.affirm'), // 按钮文字
					title: this.$t('system.Hint'),
				},
				// 预选图片组合
				icon: {
					tip: require('@/static/svg/model-tips.svg'),
					success: require('@/static/svg/model-success.svg'),
					successed: require('@/static/svg/model-successed.svg'),
					load: require('@/static/svg/model-loadding.svg'),
					err: require('@/static/svg/model-error.svg'),
					errorTip:require('@/static/images/model-error-tip.png')
				},

			};
		},
		computed: {
			iconSrc() {
				return this.icon[this.options.icon]
			}
		},
		methods: {
			// 打开模态框方法
			show(options) {
				this.delQueryDailog = true
				this.options = {
					...this.default,
					...options
				} // 打开模态框并传递选项参数
				return
			},
			// 提交
			commit() {
				const {
					confirm,
					close
				} = this.options

				typeof confirm === 'function' && confirm((c) => {
					this.delQueryDailog = false
					typeof close === 'function' && close(c)
				})

			},
			// 关闭
			close() {
				const {
					close
				} = this.options
				typeof close === 'function' && close()
				this.delQueryDailog = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.del-handle-dialog {
		.default-contetnt {
			padding: 30rpx;

			.header {
				display: flex;
				justify-content: flex-end;
			}

			.body {
				display: flex;
				flex-direction: column;
				align-items: center;

				.symbol-icon {
					width: 160rpx;
					height: 160rpx;
					line-height: 160rpx;
					color: #fff;
				}

				.title {
					margin-top: 32rpx;
					font-size: 48rpx;
					text-align: center;
				}

				.describe {
					margin-top: 18rpx;
					width: 70%;
					color: #666666;
					font-size: 28rpx;
					line-height: 42rpx;
					text-align: center;
				}

			}

			.footer {
				margin-top: 52rpx;
				margin-bottom: 44rpx;

				button {
					width: 400rpx;
					background-color: #2934D0;
					color: #fff;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 60rpx;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
